<template>
  <div class="selector-wrap">
    <section>
      <h1>默认</h1>
      <zui-selector :modelValue="modelValue.default" :options="options" />
    </section>
    <section>
      <h1>纵向排列选项</h1>
      <zui-selector v-model="modelValue.column" :options="options" direction="column" readonly />
    </section>
    <section>
      <h1>多选</h1>
      <zui-selector v-model="modelValue.multiple" :options="options" multiple />
    </section>
    <section>
      <h1>附加文本</h1>
      <zui-selector v-model="modelValue.other" :options="optionsWithOther" />
    </section>
    <section>
      <h1>Disabled</h1>
      <zui-selector :modelValue="[{ label: '汉族', value: '汉族' }]" :options="options" disabled />
    </section>
    <section>
      <h1>Readonly</h1>
      <zui-selector :modelValue="[{ label: '汉族', value: '汉族' }]" :options="options" readonly />
    </section>
    <section>
      <h1>Readonly empty</h1>
      <zui-selector :options="options" readonly />
    </section>

    <section class="val">
      <h1 class="title">modelValue</h1>
      <pre class="content"><code>{{modelValue}}</code></pre>
    </section>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const modelValue = reactive({ multiple: undefined, default: [{ label: '蒙古族', value: '蒙古族' }] })
const optionGroup = {}
setTimeout(() => {
  modelValue.default = [{ label: '满族', value: '满族' }]
}, 2000)
const options = [
  { label: '汉族', value: '汉族' },
  { label: '蒙古族', value: '蒙古族' },
  { label: '满族', value: '满族' },
  { label: '壮族', value: '壮族' },
  { label: '达斡尔族这个长一点看看超出之后会不会自动折行', value: '达斡尔族' }
]
const optionsWithOther = [
  { label: '汉族', value: 'han' },
  { label: '蒙古族', value: 'meng' },
  { label: '其他', value: 'other', editable: true }
]
</script>

<style lang="scss" scoped>
.selector-wrap {
  section {
    margin-top: 8px;
    padding: 12px 20px;
    box-sizing: border-box;
    background-color: #ffffff;
    h1 {
      line-height: 32px;
      font-weight: bold;
    }
  }
  .val {
    margin-top: 8px;
    background-color: #ffffff;
    padding: 12px 20px;
    .title {
      line-height: 32px;
    }
  }
}
</style>
